<template>
  <div id="app">
    <nav id="home_nav">
      <ul>
        <li class="nav_pic_button">
          <div>
            <router-link to="/">
              <p align="center"><span>首页</span></p>
            </router-link>
          </div>
        </li>
        <li class="nav_pic_button">
          <div>
            <router-link to="/about">
              <p align="center">
                <span>词条目录</span>
              </p>
            </router-link>
          </div>
        </li>
        <li class="nav_pic_button">
          <div>
            <router-link to="/edit">
              <p align="center">
                <span>编辑词条</span>
              </p>
            </router-link>
          </div>
        </li>
        <li class="nav_pic_button">
          <div>
            <router-link to="/sign">
              <p align="center">
                <span>个人中心</span>
              </p>
            </router-link>
          </div>
        </li>
        <section class="userInfo_area" v-if="this.$store.state.login">
          <span class="user_hello" >
            欢迎用户
            <strong class="user_name">{{ this.$store.state.userName }}</strong>
          </span>
          <a class="logout_key" href="" @click="signOut">登出</a>
        </section>
      </ul>
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
    };
  },
  methods: {
    signIn() {
      var client_id = localStorage.getItem("clientId");
      var info = JSON.parse(sessionStorage.getItem(client_id));
      if (info) {
        this.$store.commit("userLogin", {
          userName: info["user"],
          clientId: client_id,
          token: info["token"],
          // email: info['email']
        });
      }
      console.log(info, "app-info");
    },
    signOut() {
      sessionStorage.removeItem(this.$store.state.clientId);
      localStorage.removeItem("autoLogin");
      // 清空store
      this.$store.replaceState({
        userName: "",
        clientId: "",
        token: "",
        grade: 0,
        email: "",
        login: false,
      });
    },
  },
  mounted() {
    this.signIn();
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#home_nav a {
  font-weight: bold;
  color: aliceblue;
}

#home_nav a.router-link-exact-active {
  color: #02fc8b;
}

#home_nav a:link {
  color: aliceblue;
  text-decoration: none;
}

#home_nav a:hover {
  text-decoration: underline;
}

#home_nav li {
  display: inline-block;
  padding: 10px;
}

#home_nav div {
  border: aliceblue solid 1px;
  width: 150px;
  height: 100px;
  background-size: 100% 100%;
}

#home_nav div:hover {
  border: #00ffff solid 1px !important;
}

#home_nav {
  margin: 0 auto;
  text-align: center;
  background-color: rgba(240, 248, 255, 0.2);
  min-width: 100px;
}

.nav_pic_button:nth-child(1) div {
  background-image: url(~@/assets/img/OI.jpg);
}

.nav_pic_button:nth-child(2) div {
  background-image: url(~@/assets/img/OIP-C.jpg);
}

.nav_pic_button:nth-child(3) div {
  background-image: url(~@/assets/img/OIP-d.jpg);
}
.nav_pic_button:nth-child(4) div {
  background-image: url(~@/assets/img/OIP.jpg);
}
.nav_pic_button p {
  line-height: 100px;
  margin: 0;
}

.nav_pic_button p > span {
  background-color: rgba(150, 150, 150, 0.5);
}

.user_hello {
  color: whitesmoke;
  /* font-weight: bolder; */
  margin-right: 10px;
  background-color: skyblue;
}
.userInfo_area{
  display: inline-block;
}
</style>
